<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="text" name="">
	<button>查询</button>
	<img src="">
	<script type="text/javascript">
		let btn = document.querySelector("button")
		let inp = document.querySelector("input")
		let img = document.querySelector("img")

		btn.onclick = function(){
			let xhr = new XMLHttpRequest()

			xhr.open("get",`https://geoapi.qweather.com/v2/city/lookup?location=${inp.value}&key=c494e264764449f7b4f6bf742276d7f9`)

			xhr.send()

			xhr.onreadystatechange = function(){
				if (xhr.readyState == 4){
					let res = JSON.parse(xhr.responseText)
					console.log(res)
					wea(res.location[0].id)
				}
			}
		}

		function wea(id){
			let xhr = new XMLHttpRequest()

			xhr.open("get",`https://geoapi.qweather.com/v2/city/lookup?location=${id}&key=c494e264764449f7b4f6bf742276d7f9`)

			xhr.send()

			xhr.onreadystatechange = function(){
				if (xhr.readyState == 4){
					let res = JSON.parse(xhr.responseText)
					console.log(res)
					if (res.code == 200){
						img.src = `https://a.hecdn.net/img/common/icon/202106d/101.png`
					}
		}
	}
}
	</script>
</body>
</html>